<template>
  <el-submenu :index="item.href"
              v-if="item.children && item.children.length>0"
              class="el-menu-sub">

    <template slot="title">
      <i :class="item.icon"></i>
      <span>{{item.name}}</span>
    </template>

    <template v-for="child in item.children">
      <sub-menu v-if="child.children && child.children.length>0"
                :param="child">
      </sub-menu>
      <template v-else>
        <el-menu-item :index="child.href">
          <i :class="child.icon"></i>
          <span>{{child.name}}</span>
        </el-menu-item>
      </template>
    </template>

  </el-submenu>

  <el-menu-item v-else
                :index="item.href"
                class="el-menu-each">
    <i :class="item.icon"></i>
    <span>{{item.name}}</span>
  </el-menu-item>
</template>
<script>
  export default {
    name: 'subMenu',
    props: ['param'],
    data: function () {
      return {
        item: this.param
      }
    }
  }
</script>
<style>
  .el-menu .fa {
    margin-right: 10px;
  }
</style>
